// 1. 导入四个关键的路由内置组件
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'

// 2. 准备俩个组件 Home  About
import Home from './pages/Home'
import About from './pages/About'

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        {/* 3. 准备俩个跳转的按钮 Link */}
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
        {/* 4. 定义路由渲染的位置和对应关系 */}
        <Routes>
          {/* Route很关键 核心的path和渲染组件的对应关系 */}
          <Route path="/" element={<Home />}></Route>
          <Route path="/about/:id" element={<About />}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  )
}

// 总结
// 1. React路由和vue路由配置方式不太一样 vue通过集中式文件的配置方式  react这边变成了组件嵌套的方式
// 2. BrowserRouter必须外在整个根组件的最外层 其他内置路由组件需要在其内部进行配置
// 3. react路由的本质 其实体现在 Route这个组件身上 一对一 path对component的关系

export default App
